<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Top 5 Products</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/echarts.min.js"></script>
</head>
<body>
<script>
    var productData = <%= request.getAttribute("productData") %>;
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
        title: {text: 'Top 5 Products by Rating'},
        xAxis: {
            type: 'category', data: productData.map(function (item) {
                return item.name;
            })
        },
        yAxis: {type: 'value', name: 'Rating'},
        series: [{
            data: productData.map(function (item) {
                return item.rating;
            }),
            type: 'bar',
            itemStyle: {color: '#5470C6'}
        }]
    };
    chart.setOption(option);
</script>
</body>
</html>